import {OptionType, QuestionCheckboxPropsType} from "./interface";
import {Button, Checkbox, Form, Input, Space} from "antd";
import {useEffect} from "react";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import {nanoid} from "@reduxjs/toolkit";

export const PropComponent = (props: QuestionCheckboxPropsType) => {
    const {title, isVertical, list, onChange, disable} = props

    const [form] = Form.useForm()
    useEffect(() => {
        form.setFieldsValue({title, isVertical, list})
    }, [title, isVertical, list]);

    function handleValuesChange() {
        if (onChange) {
            const newValues = form.getFieldsValue() as QuestionCheckboxPropsType
            const {list = []} = newValues
            list.forEach(opt => {
                if (opt.value) return
                opt.value = nanoid(5)
            })
            onChange(newValues)
        }
    }

    return (
        <Form form={form} layout={'vertical'} initialValues={{title, isVertical, list}}
              onValuesChange={handleValuesChange}
              disabled={disable}>
            <Form.Item label={'标题'} name={'title'} rules={[
                {required: true, message: '请输入标题'}
            ]}>
                <Input></Input>
            </Form.Item>
            <Form.Item label={'选项'}>
                <Form.List name={'list'}>
                    {(fields, {add, remove}) => (<>
                        {fields.map(({key, name}, index) => {
                            return (
                                <Space key={key} align={'baseline'}>
                                    <Form.Item name={[name, 'checked']} valuePropName={'checked'}>
                                        <Checkbox></Checkbox>
                                    </Form.Item>
                                    <Form.Item name={[name, 'text']}
                                               rules={[{required: true, message: '请输入选项文字'},
                                                   {
                                                       validator: (_, text) => {
                                                           const {list = []} = form.getFieldsValue();
                                                           let num = 0
                                                           list.forEach((opt: OptionType) => {
                                                               if (opt.text === text) num++
                                                           })
                                                           if (num === 1) return Promise.resolve()
                                                           return Promise.reject(new Error('和其他选项重复了'))
                                                       }
                                                   }]}
                                    >
                                        <Input placeholder={'输入选项文字...'}></Input>
                                    </Form.Item>
                                    {index > 0 && <MinusCircleOutlined onClick={() => remove(name)}/>}
                                </Space>
                            )
                        })}
                        <Form.Item>
                            <Button block type={'link'} onClick={() => {
                                add({text: '', value: '', checked: false})
                            }} icon={<PlusOutlined/>}>
                                添加选项
                            </Button>
                        </Form.Item>
                    </>)}
                </Form.List>
            </Form.Item>
            <Form.Item name={'isVertical'} valuePropName={'checked'}>
                <Checkbox>竖向排列</Checkbox>
            </Form.Item>
        </Form>
    );
};